<script setup>
import { defineModel, ref } from 'vue'
import useDragAndDrop from './useDragAdd'

const { onDragStart } = useDragAndDrop()
const show = defineModel('show', { 
  default: true 
})
const nodes = defineModel('nodes', { default: [

]})

const pl = ref('top');
const getType = (no) => {
  let nn =no % 4
  if (nn === 0) {
    return 'success'
  } else if (nn === 1){
    return 'warning'
  } else if (nn === 2){
    return 'info'
  } else{
    return 'error'
  }
}
</script>

<template>
  <aside>
    
    <n-flex>
      <n-tag  size="large" v-for="(name, no) in nodes" round :bordered="false" :type="getType(no)"   :draggable="true" @dragstart="onDragStart($event, name)" >
        {{ name }}
        <template #icon>
          <n-icon :component="CheckmarkCircle" />
        </template>
      </n-tag>
        
    
    </n-flex>  
  </aside>
</template>

<style scoped>
</style>
